<template>
  <div class="zm-box1">
    <div class="zm-box1-bg">
      <div class="zm-box1-bg-l"></div>
      <div class="zm-box1-bg-m"></div>
      <div class="zm-box1-bg-r"></div>
    </div>
    <div class="zm-box1-title">{{title}}</div>
    <div class="zm-box1-main">
      <slot />
    </div>
  </div>
</template>

<script>
/*
  功能描述  ZmBox1
  创建人    zgf
  更新时间  2019/06/04
  备注      
*/
export default {
  name: "ZmBox1",
  props: {
    title:{
      type:String,
      default:''
    }
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="less">
@import "../../css/var.less";
@import "../../css/mixin.less";
.zm-box1 {
  height: 16rem;
  position: relative;
  &-bg {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 0;
    &-l ,&-m,&-r{
      height: 16rem;
      width: 16rem;
      background-image: url(../../../public/images/content-box1.png);
      background-size: auto 100%;
      background-position: left top;
    }
    &-m {
      flex: 1;
      width: 0;
      background-size: 10000% 100%;
      background-position: center top;
    }
    &-r {
      background-size: auto 100%;
      background-position: right top;
    }
  }
  &-title{
    position: absolute;
    left: 2.9rem;
    width: 6rem;
    text-align: center;
    top: -0.4rem;
    font-size: 1rem;
    color: #84AEFC;
  }
  &-main{
    position: relative;
    z-index: 2;
    padding: 0.75rem 0.5rem 0.5rem 0.5rem;
  }
}
</style>
